<template>
  <el-table ref="dragTable" :data="formData" :max-height="tableHeight" row-key="columnId">
    <el-table-column
      :show-overflow-tooltip="true"
      label="字段列名"
      min-width="10%"
      prop="columnName"
    />
    <el-table-column label="字段描述" min-width="10%">
      <template #default="scope">
        <el-input v-model="scope.row.columnComment" />
      </template>
    </el-table-column>
    <el-table-column
      :show-overflow-tooltip="true"
      label="物理类型"
      min-width="10%"
      prop="dataType"
    />
    <el-table-column label="Java类型" min-width="11%">
      <template #default="scope">
        <el-select v-model="scope.row.javaType">
          <el-option label="Long" value="Long" />
          <el-option label="String" value="String" />
          <el-option label="Integer" value="Integer" />
          <el-option label="Double" value="Double" />
          <el-option label="BigDecimal" value="BigDecimal" />
          <el-option label="LocalDateTime" value="LocalDateTime" />
          <el-option label="Boolean" value="Boolean" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="java属性" min-width="10%">
      <template #default="scope">
        <el-input v-model="scope.row.javaField" />
      </template>
    </el-table-column>
    <el-table-column label="插入" min-width="4%">
      <template #header>
        <div style="display: flex; align-items: center; justify-content: center;">
          <span style="margin-right: 5px;">插入</span>
          <el-checkbox v-model="allCreateOperation" @change="handleAllCreateOperationChange" />
        </div>
      </template>
      <template #default="scope">
        <el-checkbox v-model="scope.row.createOperation" :false-value="0" :true-value="1" />
      </template>
    </el-table-column>
    <el-table-column label="编辑" min-width="4%">
      <template #header>
        <div style="display: flex; align-items: center; justify-content: center;">
          <span style="margin-right: 5px;">编辑</span>
          <el-checkbox v-model="allUpdateOperation" @change="handleAllUpdateOperationChange" />
        </div>
      </template>
      <template #default="scope">
        <el-checkbox v-model="scope.row.updateOperation" :false-value="0" :true-value="1" />
      </template>
    </el-table-column>
    <el-table-column label="列表" min-width="4%">
      <template #header>
        <div style="display: flex; align-items: center; justify-content: center;">
          <span style="margin-right: 5px;">列表</span>
          <el-checkbox v-model="allListOperationResult" @change="handleAllListOperationResultChange" />
        </div>
      </template>
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.listOperationResult"
          :false-value="0"
          :true-value="1"
        />
      </template>
    </el-table-column>
    <el-table-column label="查询" min-width="4%">
      <template #header>
        <div style="display: flex; align-items: center; justify-content: center;">
          <span style="margin-right: 5px;">查询</span>
          <el-checkbox v-model="allListOperation" @change="handleAllListOperationChange" />
        </div>
      </template>
      <template #default="scope">
        <el-checkbox v-model="scope.row.listOperation" :false-value="0" :true-value="1" />
      </template>
    </el-table-column>
    <el-table-column label="查询方式" min-width="10%">
      <template #default="scope">
        <el-select v-model="scope.row.listOperationCondition">
          <el-option label="=" value="=" />
          <el-option label="!=" value="!=" />
          <el-option label=">" value=">" />
          <el-option label=">=" value=">=" />
          <el-option label="<" value="<>" />
          <el-option label="<=" value="<=" />
          <el-option label="LIKE" value="LIKE" />
          <el-option label="BETWEEN" value="BETWEEN" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="允许空" min-width="5%">
      <template #default="scope">
        <el-checkbox v-model="scope.row.nullable" false-value="false" true-value="true" />
      </template>
    </el-table-column>
    <el-table-column label="显示类型" min-width="12%">
      <template #default="scope">
        <el-select v-model="scope.row.htmlType">
          <el-option label="文本框" value="input" />
          <el-option label="文本域" value="textarea" />
          <el-option label="下拉框" value="select" />
          <el-option label="单选框" value="radio" />
          <el-option label="复选框" value="checkbox" />
          <el-option label="日期控件" value="datetime" />
          <el-option label="图片上传" value="imageUpload" />
          <el-option label="文件上传" value="fileUpload" />
          <el-option label="富文本控件" value="editor" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="字典类型" min-width="12%">
      <template #default="scope">
        <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
          <el-option
            v-for="dict in dictOptions"
            :key="dict.id"
            :label="dict.name"
            :value="dict.type"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="示例" min-width="10%">
      <template #default="scope">
        <el-input v-model="scope.row.example" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import * as CodegenApi from '@/api/infra/codegen'
import * as DictDataApi from '@/api/system/dict/dict.type'

defineOptions({ name: 'InfraCodegenColumInfoForm' })

const props = defineProps({
  columns: {
    type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
    default: () => null
  }
})

const formData = ref<CodegenApi.CodegenColumnVO[]>([])
const tableHeight = document.documentElement.scrollHeight - 350 + 'px'

// 批量选择复选框状态
const allCreateOperation = ref(false)
const allUpdateOperation = ref(false)
const allListOperationResult = ref(false)
const allListOperation = ref(false)

// 批量操作处理函数
const handleAllCreateOperationChange = (val: boolean) => {
  formData.value.forEach(item => {
    item.createOperation = val ? 1 : 0
  })
}

const handleAllUpdateOperationChange = (val: boolean) => {
  formData.value.forEach(item => {
    item.updateOperation = val ? 1 : 0
  })
}

const handleAllListOperationResultChange = (val: boolean) => {
  formData.value.forEach(item => {
    item.listOperationResult = val ? 1 : 0
  })
}

const handleAllListOperationChange = (val: boolean) => {
  formData.value.forEach(item => {
    item.listOperation = val ? 1 : 0
  })
}

/** 查询字典下拉列表 */
const dictOptions = ref<DictDataApi.DictTypeVO[]>()
const getDictOptions = async () => {
  dictOptions.value = await DictDataApi.getSimpleDictTypeList()
}

watch(
  () => props.columns,
  (columns) => {
    if (!columns) return
    formData.value = columns
  },
  {
    deep: true,
    immediate: true
  }
)

// 监听所有行的选中状态来更新全选框状态
watch(() => formData.value, () => {
  if (!formData.value || formData.value.length === 0) return
  
  // 更新插入列全选状态
  allCreateOperation.value = formData.value.every(item => item.createOperation === 1)
  
  // 更新编辑列全选状态
  allUpdateOperation.value = formData.value.every(item => item.updateOperation === 1)
  
  // 更新列表列全选状态
  allListOperationResult.value = formData.value.every(item => item.listOperationResult === 1)
  
  // 更新查询列全选状态
  allListOperation.value = formData.value.every(item => item.listOperation === 1)
}, { deep: true })

onMounted(async () => {
  await getDictOptions()
})
</script>
